<script>

export default {
  name: 'Detail',
  data() {
    return {
      loading: false,
      info: {}
    }
  },
  props: {
    statisticsMode: {
      type: String,
      required: true
    },
    device: {
      type: Object,
      required: true
    }
  },
  watch: {
    device: {
      handler(data) {
        this.loading = true
        console.log(data)
        this.$api.companyMeterStatistic.detail(
          {
            ids: this.device.ids,
            sceneCompanyId: this.device.sceneCompanyId,
            energyTypeId: this.device.energyTypeId,
            solidifyDate: this.device.solidifyDateStr
          })
          .then(response => {
            this.info = response.data
          }).finally(() => this.loading = false)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    formatDate(value) {
      switch (this.statisticsMode) {
        case 'hour':
          return value.slice(0, 16)
        case 'day':
          return value.slice(0, 10)
        case 'month':
          return value.slice(0, 7)
        case 'year':
          return value.slice(0, 4)
      }
      return value
    }
  }
}
</script>

<template>
  <div>
    <el-form>
      <h3>基本信息</h3>
      <el-form-item label="公司名称:">{{ info.companyName }}</el-form-item>
      <el-form-item label="所属项目:">{{ info.sceneProjectName }}</el-form-item>
      <el-form-item label="公司关联空间:">{{ info.roomInfo }}</el-form-item>
      <h3>统计信息</h3>
      <el-form-item label="统计时间:">{{ device.solidifyDateStr }}</el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="能耗类型:">{{ device.energyTypeName }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备数量:">{{ device.meterDeviceCount }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总计量值:">{{ device.meterValue }}</el-form-item>
        </el-col>
      </el-row>
      <el-table :data="info.meterDeviceDetails" size="small" border>
        <el-table-column prop="roomInfo" label="所属场景" />
        <el-table-column prop="deviceCode" label="设备编码" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="isFocusName" label="是否重点关注设备" />
        <el-table-column prop="readMeterTagName" label="读表标识" />
        <el-table-column prop="value" label="计量值" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column label="统计时间">
          <template #default="{row}">{{ formatDate(row.dateTime) }}</template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
